<ui:composition template="templateAdmin.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<!-- Tiene que tener un head para que tome primefaces -->
	<h:head>
<!-- 		<link rel="stylesheet" href="/BaaSWEB/css/baas.css" type="text/css" /> -->
	</h:head>
	
	<ui:define name="adminListar">	
		<h:form id="form">
		                
		    <p:growl id="messages" showDetail="true" />
		    
		    <p:dataTable id="dataTable" var="administrador" value="#{administradorBean.administradores}" editable="true">

		        <f:facet name="header">Usuarios administradores</f:facet>

		        <p:ajax event="rowEdit" listener="#{administradorBean.onEditAdministrador}" update=":form:messages" />  
		        <p:ajax event="rowEditCancel" listener="#{administradorBean.onCancelAdministrador}" update=":form:messages" />
		        		        
		        <p:column style="text-align:center; width:auto;">
			        <p:graphicImage value="/Imagenes/#{administrador.nomCompleto}.jpg">
			            <f:param name="idImg" value="#{administrador.mail}" />
			        </p:graphicImage>
			    </p:column>
		        <p:column style="text-align:center; width:auto;" headerText="Nombre Completo">		        
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{administrador.nomCompleto}" />  
		                </f:facet>
		                <f:facet name="input">
		                    <p:inputText value="#{administrador.nomCompleto}" itemValue="#{administrador.nomCompleto}" var="#{administrador.nomCompleto}" style="width:100%"/>  
		                </f:facet>
		            </p:cellEditor>
		        </p:column>
		        
		        <p:column style="text-align:center; width:auto;" headerText="Mail">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{administrador.mail}" />  
		                </f:facet>
		                <f:facet name="input">
		                    <h:outputText value="#{administrador.mail}" /> 
		                </f:facet>
		            </p:cellEditor>		            
		        </p:column>
		        
		        <p:column style="text-align:center; width:auto;" headerText="Movil">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{administrador.movil}" />  
		                </f:facet>
		                <f:facet name="input">
		                    <p:inputText value="#{administrador.movil}" itemValue="#{administrador.movil}" var="#{administrador.movil}"  style="width:100%"/>  
		                </f:facet>
		            </p:cellEditor>
		        </p:column>
		        
		        <p:column style="text-align:center; width:auto;" headerText="Sexo">
					<p:cellEditor>
		                <f:facet name="output">
		                    <h:outputText value="#{administrador.sexo}" style="width:100%"/>  
		                </f:facet>
		                <f:facet name="input">
		                    <p:selectOneMenu value="#{administrador.sexo}" style="width:100%">  
		                        <f:selectItem itemLabel="Masculino" itemValue="M" />
		                        <f:selectItem itemLabel="Femenino" itemValue="F" />  
		                    </p:selectOneMenu>  		        			
		                </f:facet>
		            </p:cellEditor>
		        </p:column>
				
		        <p:column style="text-align:center; width:auto;">  
		            <p:rowEditor />  
		        </p:column> 

				<p:column style="text-align:center; width:auto;"> 
			  		<p:growl id="eliminar" showDetail="true" />
				    <p:commandButton update="dataTable,eliminar" icon="ui-icon-trash" actionListener="#{administradorBean.postEliminarAdministrador(administrador.mail)}">
				        <p:confirm header="Confirmacion" message="¿Seguro que desea eliminar el administrador?" icon="ui-icon-alert"/>					          
				    </p:commandButton>					  
				    <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
				        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
				        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
				    </p:confirmDialog>
				</p:column>
		    </p:dataTable>
		
		    <p:blockUI block="dataTable" trigger="dataTable">LOADING<br /></p:blockUI>		
		</h:form>
		                    
	</ui:define>
</ui:composition>

